<script>
<<<<<<< HEAD
import Vue from 'vue';
import { Icon, Dialog  } from 'vant';
import Searchbar from '@/components/Searchbar.vue'
import store from 'store2'

Vue.use(Icon)

export default {
  data() {
    return {
      keywords: this.$route.params.keywords,

      hotkeywords: ['牛肉', '汤', '粥', '土豆', '鱼', '茄子', '磨牙棒', '泡菜饼', '小炒牛肉', '清蒸鱼'],

      latests: []
    }
  },

  components: {
    Searchbar
  },

  methods: {
    search(value) {
      this.$router.push({
        name: 'list',
        query: {
          keywords: value
=======
import CookbookSearchBar from '@/components/CookbookSearchBar.vue'
import store from 'store2'
import { Dialog } from 'vant'
export default {
  components: {
    CookbookSearchBar
  },

  data() {
    return {
      latest: [],
      hotkeywords: ['牛肉', '汤', '粥', '土豆', '鱼', '茄子', '磨牙棒', '泡菜饼', '小炒牛肉', '清蒸鱼'],
    }
  },

  methods: {
    search(keywords) {
      this.$router.push({
        name: 'list',
        query: {
          keywords
>>>>>>> before-10-1
        }
      })
    },

<<<<<<< HEAD
    clearStore() {
      Dialog.confirm({
        title: '删除最近搜索',
        message: '真的要删除吗？',
      })
        .then(() => {
          store.remove('latestSearches')
          this.latests = ''
=======
    remove() {
      Dialog.confirm({
        title: '删除最近搜索',
        message: '你真的要删除吗？',
      })
        .then(() => {
          store.remove('cookbook-store')
          this.latest = []
>>>>>>> before-10-1
        })
        .catch(() => {
          // on cancel
        });
    }
  },

  mounted() {
<<<<<<< HEAD
    let latests = store.get('latestSearches') || []
    this.latests = latests
=======
    const data = store.get('cookbook-store') || []
    this.latest = data
>>>>>>> before-10-1
  }
}
</script>

<template>
  <div class="search-container">
<<<<<<< HEAD
    <Searchbar 
      :keywords="$route.query.keywords"
    ></Searchbar>
=======
    <CookbookSearchBar 
      :keywords="$route.query.keywords"
    ></CookbookSearchBar>
>>>>>>> before-10-1
    <div class="hot">
      <h1>热门搜索
      </h1>
      <ul>
        <li v-for="hk in hotkeywords" @click="search(hk)">
          {{hk}}
        </li>
      </ul>
    </div>
    <div class="latest">
      <h1>最近搜索
        <van-icon 
          name="delete-o"
<<<<<<< HEAD
          @click="clearStore"
        />
      </h1>
      <ul class="latest-list">
        <li v-for="latest in latests" @click="search(latest)">
          {{latest}}
=======
          @click="remove"
        />
      </h1>
      <ul class="latest-list">
        <li v-for="item in latest" @click="search(item)">
          {{item}}
>>>>>>> before-10-1
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/border.scss";
.search-container {
  height: 100%;
  overflow-y: scroll;
  h1 {
    padding: 0 .1rem;
    height: .45rem;
    line-height: .45rem;
    color: #aaa;
    @include border_1px(0 0 1px 0, #ccc);
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 20%;
      height: .45rem;
      text-align: center;
      line-height: .45rem;
    }
  }
  .hot, .latest {
    background: #fff;
  }
  .latest {
    margin-top: .1rem;
    h1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .latest .latest-list {
    li {
      width: 100%;
      text-align: left;
      padding-left: .2rem;
      @include border_1px(0 0 1px 0, #ccc)
    }
  }
}  
</style>
